<template>
  <view class="preference">
    <view class="margin-box">
      <scroll-view scroll-y class="scroll-box">
        <block v-for="(content, index) in computedShowData" :key="index">
          <view class="scroll-item">
            <view class="pre-title" :style="index == 2 ? 'padding-top: 10rpx' : ''">{{ content.title }}</view>
            <view
              class="pre-date"
              @click="calendarClick"
              v-if="content.type == 1"
              :data-spmCntSuffix="'ChatAiPage.hotelPreferenceCard@1.calendarClick@'"
              :data-custom="1"
              :data-spm="1"
            >
              {{ content.items[0].value }}
              <image class="list-right-img" src="https://cdn1.visiotrip.com/h5AndMini/2023-11-17/edit_icon.png" />
            </view>
            <view class="pre-flex-box" v-else>
              <view
                class="flex-box-item"
                :class="{ active: item.checked }"
                v-for="(item, idx) in content.items"
                :key="item.key"
                @click="itemClick(index, idx)"
                :data-spmCntSuffix="'ChatAiPage.hotelPreferenceCard@2.tag@'"
                :data-custom="index + 1"
                :data-spm="item"
              >
                {{ item.value }}
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
      <block v-if="showData.cardBtn && showData.cardBtn.length > 0">
        <view
          v-for="(btn, index) in showData.cardBtn"
          :key="index"
          class="sure-box"
          :class="{
            active: !clickable,
          }"
          @click="sureClick"
          :data-spmCntSuffix="'ChatAiPage.hotelPreferenceCard@3.confirm@'"
          :data-custom="1"
          :data-spm="1"
        >
          {{ btn.text }}
        </view>
      </block>
    </view>
    <!-- <img
      class="scroll-mask"
      src="https://cdn1.visiotrip.com/h5AndMini/2023-10-10/scroll-bottom-2.png"
      alt=""
      srcset=""
    /> -->
  </view>
</template>

<script>
import Calendar from "../Calendar.vue";
export default {
  components: {
    Calendar,
  },
  props: {
    showData: {
      type: Object,
    },
    clickable: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
  },
  data() {
    return {
      computedShowData: [],
    };
  },
  watch: {
    clickable: {
      immediate: true,
      handler: function (value, old) {
        if(value){ //如果可以操作，取传过来的值 否则不进行数据更新
          this.computedShowData = this.showData?.cardContent
        }else{

        }
        console.log("value", value, this.computedShowData);
      },
    },
  },
  onLoad() {
    this.getToday()
  },
  mounted() {
    uni.$on("setCalendarDate", this.setCalendarDate)
  },
  methods: {
    setCalendarDate(e) {
      this.computedShowData[0].items[0].value = e.startStr.dateStr
      this.computedShowData[0].items[0].key = e.startStr.dateStr
    },
    calendarClick() {
      // this.$refs.calendar.open();
      uni.$emit("calendarBox", true);
    },
    getToday() {
      var today = new Date(); // 获取当前日期

      // 获取年月份和日期，并格式化为两位数
      var todayYear = String(today.getFullYear());
      var todayMonth = String(today.getMonth() + 1).padStart(2, "0");
      var todayDate = String(today.getDate()).padStart(2, "0");
      this.startDate = todayYear + "-" + todayMonth + "-" + todayDate; // 格式化今天的日期
      this.travelDate = todayMonth + "-" + todayDate;
      console.log(this.travelDate, this.showStartDate);
    },
    itemClick(itemIdx, index) {
      if (!this.clickable) return;
      let arr = this.computedShowData[itemIdx].items;
      console.log('arr', arr);
      for (var i = 0; i < arr.length; i++) {
        if (i == index) {
          arr[i].checked = !arr[i].checked;
        }
      }
      this.$forceUpdate();
    },
    sureClick() {
      if (!this.clickable) return;
      // console.log('this.computedShowData', this.computedShowData);
      let travelDate = "";
      let wanToGoList = []; //想去景点
      let budgetList = []; //期望预算
      for (let index = 0; index < this.computedShowData.length; index++) {
        const element = this.computedShowData[index];
        for (let idx = 0; idx < element.items.length; idx++) {
          const item = element.items[idx];
          if (element.type == 1) {
            travelDate = item.key
          }
          if (element.columnName == 'budget') {
            if (item.checked) {
              budgetList.push(item.key)
            }
          }
          if (element.columnName == 'area') {
            if (item.checked) {
              wanToGoList.push(item.key)
            }
          }
        }
      }
      let params = {
        buttonType: 6,
        hotelPreference: {
          budgetList,
          travelDate,
          wanToGoList,
        },
        triggerType: 4
      };
      console.log("params", params);
      const allTextArr = [travelDate, ...budgetList, ...wanToGoList]
      const actionText = allTextArr.join(",")
      this.$emit("sureClick", {...params, actionText});
    },
  },
};
</script>

<style scoped lang="scss">
.preference {
  position: relative;
  .scroll-mask {
    position: absolute;
    width: 100%;
    height: 52rpx;
    bottom: 90rpx;
    z-index: 3;
  }
  .margin-box {
    padding: 0 2.8%;
    .scroll-box {
      max-height: 807rpx;
    }

    .pre-title {
      font-size: 28rpx;
      color: $sl-color-black;
      font-weight: 600;
      padding: 0rpx 0 20rpx 4.5rpx;
      line-height: 40rpx;
    }
    .pre-date {
      width: 100%;
      height: 58rpx;
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 0 24rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $sl-color-black;
      line-height: 34rpx;
      margin-bottom: 24rpx;
      box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.06);
      .list-right-img {
        width: 20rpx;
        height: 20rpx;
        margin-left: 15rpx;
      }
    }
    .pre-flex-box {
      display: flex;
      flex-wrap: wrap;
      .flex-box-item {
        width: 32%;
        height: 58rpx;
        background: #ffffff;
        border-radius: 29rpx;
        margin-bottom: 12rpx;
        color: $sl-color-black;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.06);
      }
      .flex-box-item.active {
        background: rgba(27, 156, 97, 0.20);
      }
      .flex-box-item:nth-child(3n-1) {
        margin: 0 2%;
      }
    }
    .pre-flex-box-2 {
      width: 454rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin: 0 auto;
      .flex-input-box.active {
        border: none;
      }
      .flex-input-box {
        height: 88rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        .input-lable {
          color: #4d566a;
          font-size: 24rpx;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .input-controls {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 100%;
          .change-bth-box {
            height: 88rpx;
            width: 44rpx;
            display: flex;
            align-items: center;
            .change-btn {
              width: 44rpx;
              height: 44rpx;
            }
          }

          .number {
            width: 73rpx;
            text-align: center;
            font-size: 32rpx;
            color: $sl-color-dark-grey;
          }
        }
      }
    }
    .sure-box {
      width: 100%;
      height: 80rpx;
      border-radius: 26rpx;
      background: #131328;
      line-height: 80rpx;
      text-align: center;
      color: #B4EF4E;
      font-size: 28rpx;
      margin: 12rpx auto 0 auto;
      &.active {
        background: #E4E4F4;
        color: #B5B5D2;
      }
    }
  }
  .calendarBox {
    height: 75vh;
    border-radius: 30rpx 30rpx 0 0;
    background: #ffffff;
  }
}
</style>
